<template>
  <el-card class="card-box" shadow="never">
    <common-title title='公告' arrowTitle="全部"></common-title>
    <ul>
      <li v-for="(item,index) in tableData" :key="index">
        <span class="title">{{item.title}}</span>
        <span class="time">{{item.time}}</span>
      </li>
    </ul>
  </el-card>

</template>

<script lang="ts" setup>
  import { ref,onMounted } from "vue";
  import commonTitle from "./commonTitle.vue";
  const tableData = ref([
    { title: "8月15日，华润雪花生产中心华润雪花生产中心华润", time: "2023-05-10" },
    { title: "8月15日，华润雪花生产中心20年度化...", time: "2023-05-10" },
    { title: "8月15日，华润雪花生产中心20年度化...", time: "2023-05-10" },
    { title: "8月15日，华润雪花生产中心20年度化...", time: "2023-05-10" }
  ])
  onMounted(() => {
  });
</script>

<style lang="scss" scoped>
  .card-box {
    width: 33%;
    border-radius: 8px;
    box-shadow: none !important;

    :deep(.el-card__body) {
      padding: 10px 16px 16px 2px;
    }

    .tabs {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F0F0F0;
      padding-left: 16px;

      span {
        font-size: 14px;
        line-height: 22px;
        color: #666666;
        margin-right: 32px;
        cursor: pointer;
        padding: 8px 0;
      }

      .current {
        color: #666666;
        font-weight: 600;
        border-bottom: 2px solid #0073E5;
        border-radius: 6px 6px 0 0;
      }
    }

    ul {
      padding: 12px 12px 0 12px;

      li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .title {
          font-size: 14px;
          line-height: 22px;
          color: #0B0D0F;
          flex: 0.9;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          white-space: normal;
        }

        .time {
          font-size: 12px;
          line-height: 20px;
          color: #999999;
        }
      }

      li:not(:last-child) {
        margin-bottom: 12px;
      }
    }
  }
</style>
